<template>
  <div class="detail">
    <el-page-header
      class="contain"
      @back="goBack"
      style="margin-top: 50px"
      content="商品详细"
    />
    <div class="contain">
      <el-button
        type="danger"
        style="float: right"
        v-if="$store.state.user.role != 'user'"
        @click="centerDialogVisible1 = true"
        >修改</el-button
      >
    </div>
    <div class="contain" style="margin-top: 100px">
      <img :src="Url + pro.coverImg" alt="" />
      <div class="info">
        <h1>商品名称：{{ pro.goodsName }}</h1>
        <p>
          <i style="color: #90969c; margin-right: 9px; cursor: default"
            >参考价格&nbsp;&nbsp;</i
          ><b style="color: #eea20e; font-size: 18px"
            >|&nbsp;&nbsp;￥{{ pro.price }}</b
          >
        </p>
        <div>
          <el-avatar
            icon="el-icon-user-solid"
            :src="Url + pro.avatar"
          ></el-avatar>
          <h3>卖家：{{ pro.userName }}</h3>
        </div>
        <div>
          <p style="font-size: 14px; color: #90969c">
            <b>描述：</b>{{ pro.des }}
          </p>
          <el-button
            @click="goBuy"
            type="primary"
            style="float: right; margin-left: 15px"
            >购买</el-button
          >
          <el-button type="warning" style="float: right" @click="addCart">{{
            !isCart ? "取消收藏" : "加入收藏"
          }}</el-button>
        </div>
      </div>
    </div>
    <el-dialog
      title="修改商品"
      :visible.sync="centerDialogVisible1"
      width="50%"
      center
      v-if="centerDialogVisible1"
      destroy-on-close
    >
      <GoodsForm ref="product" :data="pro" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="upload">上 传</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="支  付"
      :visible.sync="centerDialogVisible"
      width="25%"
      center
      top="10%"
      v-if="centerDialogVisible"
    >
      <p>
        订单备注请输入：<b ref="temp" style="color: red">{{ Date.now() }}</b>
      </p>
      <img :src="imgUrl" alt="" style="width: 100%" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="paid">已经支付</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import GoodsForm from "../Mine/Goods/GoodsForm.vue";
export default {
  name: "indedx",
  data() {
    return {
      imgUrl: process.env.VUE_APP_BASE_API + "public/img/zhipay.jpg",
      Url: process.env.VUE_APP_BASE_API,
      pro: {},
      isCart: true,
      centerDialogVisible: false,
      centerDialogVisible1: false,
    };
  },
  computed: {},
  watch: {},

  methods: {
    goBuy() {
      if (!this.$store.state.user._id) {
        this.$router.push("/login");
        this.$message({
          message: "请先登录",
          type: "warning",
        });
      }

      this.centerDialogVisible = true;
      // this.$router.push({ path: "/buy", query: { id: this.$route.query.id } });
    },
    upload() {
      let file = this.$refs.product.file;
      console.log(this.$refs.product.product, "商品数据");
      let { price, goodsName, des, _id } = this.$refs.product.product;
      let cascader = this.$refs.product.$refs.cascader.value;
      let data = { price, goodsName, des, pid: _id };
      data.uid = this.$store.state.user._id;
      data.category = JSON.stringify(cascader);
      console.log(data);
      let formdata = new FormData();
      formdata.append("product", file);
      for (let i in data) {
        formdata.append(i, data[i]);
      }
      this.axios({
        data: formdata,
        url: "/api/v1/product/edit",
        method: "put",
        headers: {
          "Content-Type": "multipart/form-data",
        },
      }).then((res) => {
        this.msg(res, this);
        this.centerDialogVisible1 = false;
        // this.$emit("updata", res.data, this.index);
        // console.log(res);
      });
    },
    paid() {
      // console.log(this.$refs.temp.innerText);
      this.axios
        .get("/api/v1/orders/add", {
          params: {
            temp: this.$refs.temp.innerText,
            pid: this.$route.query.id,
          },
        })
        .then((res) => {
          console.log(res);
          this.msg(res, this);
          if (res.code == 1) {
            this.centerDialogVisible = false;
          }
        });
      // this.centerDialogVisible = false;
    },
    addCart() {
      if (!this.$store.state.user._id) {
        this.$router.push("/login");
        this.$message({
          message: "请先登录",
          type: "warning",
        });
      }
      this.axios.get("/api/v1/cart/" + this.$route.query.id).then((res) => {
        console.log(res);
        if (res.type == 0) {
          this.isCart = true;
        } else {
          this.isCart = false;
        }
        if (res.code == 1) {
          this.msg(res, this);
        }
      });
    },
  },
  created() {
    // console.log(this.Url + this.pro.avatar);
    let id = this.$route.query.id;
    this.axios.get("/api/v1/product/" + id).then((res) => {
      console.log(res);
      let cart = this.$store.state.user?.cart;
      if (cart?.indexOf(res.data._id)) {
        this.isCart = true;
      }
      this.pro = res.data;
    });
  },
  mounted() {},
  components: { GoodsForm },
};
</script>
<style scoped>
.detail {
  overflow: hidden;
  background-color: #1e2329;
  margin: 0 auto;
  height: 100%;
  text-align: center;
  color: white;
}
.detail img {
  /* width: 50%; */
  width: 590px;
  margin: 10px 0 20px 0;
  float: left;
}
.info {
  margin: 10px 0 20px 0;
  text-align: left;
  float: right;
  height: 300px;
  width: 590px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
/* .info */
</style>
<style>
.el-page-header__content {
  color: white;
}
</style>